<template>
	<view class="me">
		<view class="top_box">
			<view @click="tabqaq" :style="{'padding-top':systemInfo+'px'}" class="posiab " style="right:15px;top:0;z-index:1000;margin-top:100rpx;">帮助
			   <u-icon name="question-circle" style="margin-left:3px;"></u-icon>
			</view>
			
			<view class="back_img">
				<image src="/static/userbg.png" alt="" />

				<view class="me_box" @tap="onAutoLogin">
					<view class="photo">
						
						<image v-if="userInfo.avatar" mode="widthFix" :src="userInfo.avatar"
							class="photo_img" />
							<view v-else class="flex-ju-c" style="background: #D8E1E6;border:2px solid #FFFFFF;width:130rpx;height:130rpx;border-radius: 50%;">
								<image class="image flex" style="width: 50rpx;" mode="widthFix" src="/static/weidenglu.png"></image>
							</view>
						<!-- <image mode="widthFix" src="./images/nan.png" v-if="userInfo.gender == 1" class="nan_nv" />
						<image mode="widthFix" src="./images/nu.png" v-if="userInfo.gender == 0" class="nan_nv" /> -->
					</view>
					<view class="name">
						<view style="font-size: 40rpx;">{{ userInfo.nickname || '授权登录' }}</view>
						<view style="color:#999;" class="size12">欢迎回来瓜子潮玩</view>
					</view>
				</view>
				
				<view class="two_box flex-ju-a">
					<view>
						<view class="size20 bold" style="color:#242B33;">18</view>
						<view class="color999 size11">我的盒柜</view>
					</view>
					<view>
						<view class="size20 bold" style="color:#242B33;">18</view>
						<view class="color999 size11">我的优惠券</view>
					</view>
					<view>
						<view class="size20 bold" style="color:#242B33;">18</view>
						<view class="color999 size11">我的邀请</view>
					</view>
					
					<!-- <view class="left" @click="onclickHandle('', 'toMyWallet', {})">
						<image mode="widthFix" :src="
                $IMG_URL +
                '/uploads/20230428/19c8eefc9af41288d32841dabc0f63cf.png'
              " alt="" />
						<text class="yuer_text">余额（元）</text>
						<text class="yuer" :class="userInfo.money && userInfo.money.length > 5 ? 'mini' : ''">{{
                userInfo.money && userInfo.money.length > 5
                  ? Number(userInfo.money)
                  : userInfo.money || '--'
              }}</text>
					</view>
					
					<view class="right" @click="onclickHandle('', 'toCart', {})">
						<image mode="widthFix" :src="
                $IMG_URL +
                '/uploads/20230428/e65be9e66dedc45d47ec4d2272c6f87b.png'
              " alt="" />
						<text class="yuer_text">我的盒柜</text>
						<text class="yuer">{{
              boxNumber >= 1000
                ? '999+'
                : boxNumber > 0
                ? boxNumber
                : boxNumber == '0'
                ? boxNumber
                : '--'
            }}</text>
					</view> -->
				</view>
				
				 <view class="bgfff con p30 posire" style="border-radius: 10px;margin-top:-280rpx;">
					 <view class="flex-ju-b flex1 size14" style="color: #2E4D4D;">
						 <view class="bold">我的订单</view>
						 <view style="color:#8D8D99;">MORE <u-icon color="#8D8D99" size="25" name="arrow-right"></u-icon> </view>
					 </view>
					
					<view class="flex-ju-a  size11 mt15" style="text-align: center;">
						<view>
							<image class="image" style="width: 80rpx;" mode="widthFix" src="/static/images/box-2.png"></image>
							<view>
								待发货
							</view>
						</view>
						<view>
							<image class="image" style="width: 80rpx;"  mode="widthFix" src="/static/images/car-1.png"></image>
							<view>待收货</view>
							
						</view>
						<view>
							<image class="image" style="width: 80rpx;" mode="widthFix" src="/static/images/pingjia.png"></image>
							<view>待评价</view>
							
						</view>
						<view>
							<image class="image" style="width: 80rpx;" mode="widthFix" src="/static/images/tuikuan.png"></image>
							<view>退款售后</view>
							
						</view>
					</view>
					
				</view> 
				
				<view class="bgfff con p30 posire mt15" style="border-radius: 10px;">
					 <view class="flex-ju-b flex1 size14" style="color: #2E4D4D;">
						 <view class="bold">我的服务</view>
					 </view>
					
					<view class="flex-ju-a  size11 mt15" style="text-align: center;">
						<view>
							<image class="image" style="width: 80rpx;" mode="widthFix" src="/static/images/qianbap.png"></image>
							<view>
								我的钱包
							</view>
						</view>
						<view>
							<image class="image" style="width: 80rpx;"  mode="widthFix" src="/static/images/duihuan.png"></image>
							<view>兑换中心</view>
							
						</view>
						<view>
							<image class="image" style="width: 80rpx;" mode="widthFix" src="/static/images/chouqian.png"></image>
							<view>我的抽选</view>
							
						</view>
						<view>
							<image class="image" style="width: 80rpx;" mode="widthFix" src="/static/images/hezuo.png"></image>
							<view>商务合作</view>
						</view>
					</view>
					
				</view> 
				
				<view class="bgfff con p30 size13 mt15" style="border-radius: 10px;color:#2E4D4D;">
					<view class="flex-ju-b">
						<view class="flex-a-i">
							<image mode="widthFix" class="image mr10" style="width: 40rpx;" src="/static/kefu.png"></image>
							联系客服
						</view>
						<u-icon name="arrow-right" color="#8C8C8C" size="25" class="right"></u-icon>
					</view>
					<view class="flex-ju-b mt20">
						<view class="flex-a-i">
							<image mode="widthFix" class="image mr10" style="width: 40rpx;" src="/static/jiaru.png"></image>
							加入我们
						</view>
						<u-icon name="arrow-right" color="#8C8C8C" size="25" class="right"></u-icon>
					</view>
					<view class="flex-ju-b mt20">
						<view class="flex-a-i">
							<image mode="widthFix" class="image mr10" style="width: 40rpx;" src="/static/dizhi.png"></image>
							我的地址
						</view>
						<u-icon name="arrow-right" color="#8C8C8C" size="25" class="right"></u-icon>
					</view>
					<view class="flex-ju-b mt20">
						<view class="flex-a-i">
							<image mode="widthFix" class="image mr10" style="width: 40rpx;" src="/static/duoduo.png"></image>
							更多功能
						</view>
						<u-icon name="arrow-right" color="#8C8C8C" size="25" class="right"></u-icon>
					</view>
				</view>
					<view class="flex-ju-c mt30 pb30" style="padding-bottom: 80px;color:#999999;">瓜子潮玩提供技术支持</view>
				
			</view>
		</view>
		
		
		<!-- <view class="nav_box" @click="onclickHandle('', 'toCoupon', {})">
			<view class="top">
				<image mode="widthFix" class="top-icon" src="@/static/images/ment-1.png" />
			</view>
			<view class="text">优惠券</view>
		</view>
		<view class="nav_box" @click="onclickHandle('', 'duihuan', {})">
			<view class="top">
				<image mode="widthFix" class="top-icon" src="@/static/images/check-1.png"  />
			</view>
			<view class="text">兑换中心</view>
		</view>
		<view class="nav_box" @click="onclickHandle('', 'tixing', {})">
			<view class="top">
		
				<image mode="widthFix" class="top-icon" src="@/static/images/game-1.png"  />
			</view>
			<view class="text">我的抽选</view>
		</view>
		
		
		<view class="nav_box" @click="onclickHandle('', 'yaoqing', {})">
			<view class="top" style="display: flex;align-items: center;justify-content: center;">
				<image mode="widthFix" style="width:60rpx;height:60rpx;" class="top-icon" src="@/static/images/wallet-t.png"
					 />
			</view>
			<view class="text">邀请好友</view>
		</view> -->
		
		<view v-if="0" class="main">
			<view class="order">
				<view class="top_line">
					<text class="title">我的订单</text>
					<view class="right" @click="onclickHandle('', 'toAllOrder', {})">
						<text class="all">全部订单</text>
						<u-icon name="arrow-right" color="#8C8C8C" size="18" class="right"></u-icon>
					</view>
				</view>
				<view class="nav">
				<!-- 	<view class="box" @click="onclickHandle('', 'toNopay', {})">
						<view v-if="userOtherData.order_num.nopay>0" style="font-size: 24rpx;   position: absolute;margin-left: 50rpx;margin-top:5rpx;color:#fff;z-index: 5;">
							<view style="background: #fd4507;border-radius:30rpx;min-width: 30rpx;padding:0px 4px;text-align: center;">
								{{userOtherData.order_num.nopay}}
							</view>
						</view>
						<image mode="widthFix" src="@/static/images/ment-2.png" alt="" />
						<text>待付款</text>
					</view> -->
					
					<view class="box" @click="onclickHandle('', 'zeng', {})">
						<view v-if="userOtherData.order_num&&userOtherData.order_num.nosend>0" style="font-size: 24rpx;   position: absolute;margin-left: 50rpx;margin-top:5rpx;color:#fff;z-index: 5;">
							<view style="background: #fd4507;border-radius:30rpx;min-width: 30rpx;padding:0px 4px;text-align: center;">
								
							</view>
						</view>
						<image mode="widthFix" src="@/static/images/box-2.png" alt="" />
						<text>转赠</text>
					</view>
					<view class="box" @click="onclickHandle('', 'toNosend', {})">
						<view v-if="userOtherData.order_num&&userOtherData.order_num.nosend>0" style="font-size: 24rpx;   position: absolute;margin-left: 50rpx;margin-top:5rpx;color:#fff;z-index: 5;">
							<view style="background: #fd4507;border-radius:30rpx;min-width: 30rpx;padding:0px 4px;text-align: center;">
								{{userOtherData.order_num.nosend}}
							</view>
						</view>
						<image mode="widthFix" src="@/static/images/box-2.png" alt="" />
						<text>待发货</text>
					</view>
					<view class="box" @click="onclickHandle('', 'toNoget', {})">
						<view v-if="userOtherData.order_num&&userOtherData.order_num.noget>0" style="font-size: 24rpx;   position: absolute;margin-left: 50rpx;margin-top:5rpx;color:#fff;z-index: 5;">
							<view style="background: #fd4507;border-radius:30rpx;min-width: 30rpx;padding:0px 4px;text-align: center;">
								{{userOtherData.order_num.noget}}
							</view>
						</view>
						<image mode="widthFix" src="@/static/images/car-1.png" alt="" />
						<text>待收货</text>
					</view>
					<view class="box" @click="onclickHandle('', 'noComment', {})">
						<view v-if="userOtherData.order_num&&userOtherData.order_num.noget>0" style="font-size: 24rpx;   position: absolute;margin-left: 50rpx;margin-top:5rpx;color:#fff;z-index: 5;">
							<view style="background: #fd4507;border-radius:30rpx;min-width: 30rpx;padding:0px 4px;text-align: center;">
								
							</view>
						</view>
						<image mode="widthFix" src="@/static/images/car-1.png" alt="" />
						<text>已完成</text>
					</view>
					<!-- <view class="box" @click="onclickHandle('', 'noComment', {})">
						<view v-if="userOtherData.order_num&&userOtherData.order_num.nocomment>0" style="font-size: 24rpx;   position: absolute;margin-left: 50rpx;margin-top:5rpx;color:#fff;z-index: 5;">
							<view style="background: #fd4507;border-radius:30rpx;min-width: 30rpx;padding:0px 4px;text-align: center;">
								{{userOtherData.order_num.nocomment}}
							</view>
						</view>
						<image mode="widthFix" src="@/static/images/msg-2.png" alt="" />
						<text>待评价</text>
					</view> -->
					<!-- <view class="box"  @click="onclickHandle('', 'afterSales', {})">
						<view v-if="userOtherData.order_num&&userOtherData.order_num.aftersale>0" style="font-size: 24rpx;   position: absolute;margin-left: 50rpx;margin-top:5rpx;color:#fff;z-index: 5;">
							<view style="background: #fd4507;border-radius:30rpx;min-width: 30rpx;padding:0px 4px;text-align: center;">
								{{userOtherData.order_num.aftersale}}
							</view>
						</view>
						<image mode="widthFix" src="@/static/images/wallet-2.png" alt="" />
						<text>退款售后</text>
					</view> -->
				</view>
			</view>
			<swiper v-if="imgList.length" autoplay interval="2000" duration="500" circular class="top-swiper">
				<swiper-item class="swiper" wx:key="id" v-for="(item, index) in imgList" :key="index">
					<image mode="widthFix" :src="item.fullPath" />
				</swiper-item>
			</swiper>
			<view class="server">
				<view class="title">我的服务</view>
				<view class="server_box">
					<!-- <view class="box" @click="onclickHandle('', 'inprops', {})">
            <view class="tubiao">
              <image mode="widthFix" src="@/static/images/idea-2.png" alt="" />
            </view>
            <view class="text">我的道具</view>
          </view> -->
		  <button class="box" open-type="contact" style="padding: 0; margin: 0;background: initial;line-height:1.4;">
		  	<view open-type="contact" class="tubiao ">
		  		<image mode="widthFix" src="@/static/images/look-2.png" alt="" />
		  	</view>
		  	<view class="text">联系客服</view>
		  </button>
					<view class="box" @click="onclickHandle('', 'tixing', {})">
						<view class="tubiao">
							<image mode="widthFix" src="@/static/images/cocess-2.png" alt="" />
						</view>
						<view class="text">商务合作</view>
					</view>
					<view class="box" @click="onclickHandle('', 'tixing', {})">
						<view class="tubiao">
							<image mode="widthFix" src="@/static/images/cocess-2.png" alt="" />
						</view>
						<view class="text">加入我们</view>
					</view>
					<!-- <view class="box" @click="onclickHandle('', 'toHis', {})">
						<view class="tubiao">
							<image mode="widthFix" src="@/static/images/text-2.png" alt="" />
						</view>
						<view class="text">浏览足迹</view>
					</view> -->
					<view class="box" @click="onclickHandle('', 'toMyAddress', {})">
						<view class="tubiao">
							<image mode="widthFix" src="@/static/images/pos-2.png" alt="" />
							<!-- <view class="iconfont icon-dizhi"></view> -->
						</view>
						<view class="text">我的地址</view>
					</view>
					<!-- <view class="box" @click="onclickHandle('', 'tixing', {})">
						<view class="tubiao">
							<image mode="widthFix" src="@/static/images/help-2.png" alt="" />
						</view>
						<view class="text">帮助中心</view>
					</view> -->
					<!-- <view class="box" @click="onclickHandle('', 'about', {})">
						<view class="tubiao">
							<image mode="widthFix" src="@/static/images/info-2.png" alt="" />
						</view>
						<view class="text">关于我们</view>
					</view> -->
					<!-- <view class="box" @click="onclickHandle('', 'tixing', {})">
						<view class="tubiao">
							<image mode="widthFix" src="@/static/images/edit-2.png" alt="" />
						</view>
						<view class="text">意见反馈</view>
					</view> -->
					
					
					<view class="box" @click="onclickHandle('', 'togerenxinxi', {})">
						<view class="tubiao">
							<image mode="widthFix" src="@/static/images/set-2.png" alt="" />
							<!-- <view class="iconfont icon-yunongtonggengduoshezhi"></view> -->
						</view>
						<view class="text">更多设置</view>
					</view>
					
				</view>
			</view>
		</view>
		<shopro-auth-modal></shopro-auth-modal>
	</view>
	
</template>
<script>
	import tools from '@/shopro/utils/tools';
	const _delay = tools.delayDither(300);
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		// 建议 创建每个组件时 都添加name属性 标识组件名称
		name: '',
		data() {
			return {
				systemInfo: uni.getSystemInfoSync().statusBarHeight,
				nan: true,
				showTitle: true,
				imgList: [],
				boxNumber: null,
			};
		},
		// 计算属性 适配者模式
		computed: {
			...mapGetters([
				'userOtherData',
				'initShop',
				'userTemplate',
				'isLogin',
				'userInfo',
				'authType',
				'token',
			]),
		},
		// 数据监听
		watch: {
			userInfo(item) {
				this.getBoxNumber();
			},
		},
		/**
		 * 生命周期 类似 发布订阅者模式
		 */
		//监听页面初始化，其参数同 onLoad 参数 触发时机早于 onLoad 百度小程序
		//onInit() {},
		/** 监听页面加载
		 * 其参数为上个页面传递的数据，
		 * 参数类型为 Object（用于页面传参）
		 */
		mounted() {
			this.$http('v1.helplist', {}, '加载中').then((res) => {
				if (res.code === 1) {
					
				}
			})
		},
		onLoad() {
		},
		// 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
		onShow() {
			this.getUserData();
			this.getUserInfo();
			this.getSlideshow();
			this.getBoxNumber();
		},
		// 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		// 监听页面隐藏
		onHide() {},
		// 监听页面卸载
		onUnload() {},
		methods: {
			...mapActions(['getUserInfo', 'showAuthModal', 'getUserData', 'autoLogin']),
			// 获取轮播图
			tabqaq(){
				console.log("ggg")
				uni.navigateTo({
					url:"/pages/index/qaq"
				})
			},
			getSlideshow() {
				this.$http('v1.getSlideshow', {}, '加载中').then((res) => {
					if (res.code === 1) {
						this.imgList = res.data;
					}
				});
			},
			onAutoLogin() {
				if (!this.userInfo.avatar && !this.userInfo.nickname) {
					console.log("rrr11")
					// 之前的逻辑 
					//this.autoLogin();
					this.showAuthModal();
				} else {
					// uni.navigateTo({
					//   url: '/pages/app/member/index',
					// });
				}
			},
			getBoxNumber() {
				setTimeout(() => {
					if (this.userInfo.id) {
						this.$http('v1.boxcabinet', {
							id: this.userInfo.id,
						}).then((res) => {
							this.boxNumber = res.data;
						});
					}
				}, 2000);
			},
			onclickHandle(ev, name, data = {}) {
				_delay(() => {
					switch (name) {
						case 'zeng':
							// this.$Router.push({
							// 	path: '/pages/index/zeng'
							// });
							uni.navigateTo({
								url:"/pages/index/zeng"
							})
							break;
						case 'duihuan':
							this.$Router.push({
								path: '/pages/index/duihuan'
							});
							break;
						case 'toAllOrder':
							this.toAllOrder();
							break;
						case 'togerenxinxi':
							this.togerenxinxi();
							break;
						case 'toMyWallet':
							this.toMyWallet();
							break;
						case 'toMyAddress':
							this.toMyAddress();
							break;
						case 'toNopay':
							this.$Router.push({
								path: '/pages/my_order/my_order',
								query: {
									orderType: 'unpaid'
								},
							});
							break;
						case 'toNosend':
							this.$Router.push({
								path: '/pages/my_order/my_order',
								query: {
									orderType: 'undelivered'
								},
							});
							break;
						case 'toNoget':
							this.$Router.push({
								path: '/pages/my_order/my_order',
								query: {
									orderType: 'unreceived'
								},
							});
							break;
						case 'noComment':
							this.$Router.push({
								path: '/pages/my_order/my_order',
								query: {
									orderType: 'complete'
								},
							});
							break;
						case 'afterSales':
							this.$Router.push({
								path: '/pages/my_order/my_order',
								query: {
									orderType: 'refund'
								},
							});
							break;
						case 'toHis':
							this.$Router.push({
								path: '/pages/user/hisFoot',
							});
							break;
						case 'toCoupon':
							this.$Router.push({
								path: '/pages/app/coupon/list',
							});
							break;
						case 'inprops':
							this.$Router.push({
								path: '/pages/fullopen/myprops',
							});
							break;
						case 'about':
							this.$Router.push({
								path: '/pages/user/setInfo/about',
							});
							break;
						case 'tixing':
							this.tixing();
							break;
						case 'distribution':
							this.distribution();
							break;
						case 'yaoqing':
							this.$Router.push({
								path: '/pages/app/yaoqing',
							});
							break;
						case 'toCart':
							uni.switchTab({
								url: '/pages/index/cart',
							});
					}
				});
			},
			toAllOrder() {
				this.$Router.push({
					path: '/pages/my_order/my_order',
					query: {
						orderType: 'all'
					},
				});
				// this.$Router.push({
				//   path: '/pages/order/list',
				// });
				// url: 'pages/order/list',
			},
			togerenxinxi() {
				uni.navigateTo({
					url: 'pages/user/info',
				});
			},
			toMyWallet() {
				uni.navigateTo({
					url: 'pages/user/wallet/index',
				});
			},
			toMyAddress() {
				uni.navigateTo({
					url: 'pages/user/address/list',
				});
			},
			//未开放功能提醒正在努力开发中~
			tixing() {
				uni.showToast({
					title: '正在努力开发中~',
					duration: 2000,
					icon: 'none',
				});
			},
			//跳转分销中心
			distribution() {

				this.$http('v1.distribution', {}, '加载中').then((res) => {
					if (res.code === 1) {
						if (res.data.status == 1) {
							uni.navigateTo({
								url: 'pages/app/commission/index',
							});
						}
						if (res.data.status == 0) {
							uni.showToast({
								title: '正在努力开发中~',
								duration: 2000,
								icon: 'none',
							});
						}
					}
				});
			},
		},
		// 屏幕滚动20rpx时顶部标题消失
		onPageScroll(e) {
			if (e.scrollTop > 20) {
				this.showTitle = false;
			}
			if (e.scrollTop < 20) {
				this.showTitle = true;
			}
		},
	};
</script>
<style lang="scss" scoped>
	page{
		background: #ECF6FB;
	}
	.me {
		padding-bottom:100rpx;
		.top_box {
			height: 724rpx;

			.biaoti {
				/deep/ .cu-bar {
					background-color: rgba(0, 0, 0, 0) !important;
				}

				/deep/ .u-flex {
					left: 38%;
				}
			}

			.noneBiaoti {
				display: none;
			}

			.back_img {
				height: 725rpx;
				width: 750rpx;
				position: absolute;
				top: 0;
				left: 0;

				image {
					width: 100%;
					height: 100%;
				}

				.me_box {
					height: 165rpx;
					width: 690rpx;
					display: flex;
					align-items: center;
					position: absolute;
					left: 30rpx;
					bottom: 480rpx;

					.photo {
						margin-top:30rpx;
						width: 120rpx;
						height: 160rpx;
						position: relative;
						margin-right: 26rpx;

						.photo_img {
							width: 100%;
							height: 100%;
						}

						.nan_nv {
							position: absolute;
							right: 0;
							bottom: 0;
							width: 35rpx;
							height: 35rpx;
							border-radius: 50%;
						}
					}
				}

				.two_box {
					width: 100%;
					text-align: center;
					height: 140rpx;
					position: absolute;
					bottom: 305rpx;
					display: flex;

					.left {
						width: 284rpx;
						height: 140rpx;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						position: relative;

						img {
							width: 100%;
							height: 100%;
						}

						.yuer_text {
							position: absolute;
							left: 24rpx;
							top: 28rpx;
							font-size: 20rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 400;
							color: #727272;
						}

						.yuer {
							position: absolute;
							left: 24rpx;
							bottom: 14rpx;
							font-size: 50rpx;
							font-family: Oswald-Bold, Oswald;
							font-weight: 700;
							color: #323232;

							&.mini {
								font-size: 30rpx;
								bottom: 20rpx;
							}
						}
					}

					.right {
						width: 284rpx;
						height: 140rpx;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						position: relative;
						margin-left: 30rpx;

						img {
							width: 100%;
							height: 100%;
						}

						.yuer_text {
							position: absolute;
							left: 24rpx;
							top: 28rpx;
							font-size: 20rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 400;
							color: #727272;
						}

						.yuer {
							position: absolute;
							left: 24rpx;
							bottom: 14rpx;
							font-size: 50rpx;
							font-family: Oswald-Bold, Oswald;
							font-weight: 700;
							color: #323232;
						}
					}
				}

				.nav {
					width: 92%;
					left:4%;
					position: absolute;
					bottom: 154rpx;
					padding:30rpx;
					border-radius: 10px;
					background: #fff;

					.nav_box {
						width: 20%;
						height: 130rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;

						.top {
							width: 100rpx;
							height: 100rpx;
							border-radius: 50%;

							line-height: 100rpx;
							text-align: center;

							.top-icon {
								width: 100rpx;
								height: 100rpx;
							}
						}

						.text {
							font-size: 20rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: 700;
							color: #3d3d3d;
						}
					}
				}
			}
		}

		.main {
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			width: 100%;
			padding: 32rpx 30rpx;
			margin-top: -20rpx;
			position: relative;

			.order {
				width: 690rpx;
				height: 217rpx;
				background: #ece6fd;
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				padding: 26rpx 35rpx;
				box-sizing: border-box;

				.top_line {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.title {
						font-size: 22rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: 700;
						color: #111111;
					}

					.right {
						font-size: 18rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #8c8c8c;
					}
				}

				.nav {
					width: 100%;
					height: 140rpx;
					display: flex;
					justify-content: space-evenly;
					margin-top: 10rpx;

					.box {
						width: 20%;
						height: 120rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;

						image {
							width: 90rpx;
							height: 90rpx;
						}

						text {
							font-size: 20rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: 400;
							color: #3d3d3d;
						}
					}
				}
			}

			.top-swiper {
				height: 173rpx;
				width: 100%;
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin-top: 17rpx;

				img {
					width: 100%;
					height: 100%;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
				}
			}

			.server {
				width: 690rpx;
				height: 230rpx;
				background: #ffffff;
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				padding: 30rpx 35rpx;
				margin-top: 26rpx;

				.title {
					font-size: 22rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: 700;
					color: #111111;
				}

				.server_box {
					display: flex;
					flex-wrap: wrap;
					width: 100%;

					.box {
						display: flex;
						flex-direction: column;
						align-items: center;
						width: 20%;

						.tubiao {
							width: 100rpx;
							height: 100rpx;
							line-height: 100rpx;
							text-align: center;
							display: flex;
							justify-content: center;
							align-items: center;

							.iconfont {
								color: #3d3d3d;
								font-size: 56rpx;
							}

							img {
								width: 80rpx;
								height: 80rpx;
							}
						}

						.text {
							font-size: 20rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: 400;
							color: #3d3d3d;
						}
					}
				}
			}
		}
	}

	.font-icon {
		font-size: 60rpx;
	}
	button::after{
		border:none;
		height:100%;
	}
	.color999{
		color:#999;
	}
</style>